<!DOCTYPE html>
<html lang="zh-hans-CN">
<head>
  <meta charset="UTF-8">
  <title>我的加油卡</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <link rel="stylesheet" href="../css/frozen.css">
  <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<section class="cardlist">
  <div class="refuel"><img src="../img/refuel.png" alt="refuel"></div>

  <ul class="ui-list ui-list-text card-ul">
    <li class="card-item">
      <div class="ui-list-info">
        <h4 class="ui-nowrap">主卡号：65***685233</h4>
      </div>
      <a href="javascript:;">解除绑定</a>
    </li>
    <li class="card-item">
      <div class="ui-list-info">
        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
      </div>
      <a href="javascript:;">解除绑定</a>
    </li>
    <li class="card-item">
      <div class="ui-list-info">
        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
      </div>
      <a href="javascript:;">解除绑定</a>
    </li>
    <li class="card-item">
      <div class="ui-list-info">
        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
      </div>
      <a href="javascript:;">解除绑定</a>
    </li>

    <li onclick="window.location.href='card_add.html'">
      <div class="ui-list-info">
        <h4 class="text-center">+ 添加新加油卡</h4>
      </div>
    </li>
  </ul>
</section>


<script src="../lib/zepto.min.js"></script>
<script src="../lib/layer.js"></script>
<script src="../js/frozen.js"></script>
<script src="../js/main.js"></script>
<script>
  (function () {
    /**
     * 是否解除绑定
     */
    $('.card-item').on('tap',function () {
      layer.open({
        title: '提示',
        content: '您确定要接触加油卡绑定？',
        btn: ['是','否'],
        yes: function(index){
          layer.close(index);
          window.location.href = 'card_remove.html';
        },
        no: function(index){
          layer.close(index);
          alert('no');
        }
      });
    });
  })();
</script>
</body>
</html>